<html>
<head>
    <meta charset="UTF-8">
    <title>上传检验项目</title>
    <link rel="stylesheet" href="/css/index.css">

    <script src="/js/vue.js"></script>
    <script src="/js/index.js"></script>
    <script src="/js/jquery.min.js"></script>
    <style>
        #app {
            padding: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-form :inline="true" :model="car" class="demo-form-inline">
        <el-form-item label="号牌号码">
            <el-input v-model="car.hphm" placeholder="号牌号码"></el-input>
        </el-form-item>
        <el-form-item label="流水号">
            <el-input v-model="car.jylsh" placeholder="流水号"></el-input>
        </el-form-item>
        <el-form-item label="搜索模式">
            <el-select v-model="car.queryModel" placeholder="请选择">
                <el-option
                        label="模式1"
                        value="00">
                </el-option>
                <el-option
                        label="模式2"
                        value="01">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" v-on:click="onQuery">查询</el-button>
        </el-form-item>
    </el-form>
    <el-form size="mini" :inline="true" :model="config" class="demo-form-inline">
        <el-form-item label="延迟时间/毫秒(0-3s)">
            <el-input type="number" v-model="config.delay" placeholder="延迟时间"></el-input>
        </el-form-item>
        <el-form-item label="拍照线路">
            <el-select v-model="config.line" placeholder="请选择">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
    </el-form>
    <el-table
            @row-dblclick="test"
            v-loading="loading"
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                fixed
                type="index"
        >
        </el-table-column>
        <el-table-column
                prop="hphm"
                label="车牌号"
        >
        </el-table-column>
        <el-table-column
                prop="clsbdh"
                label="车架号"
        >
        </el-table-column>
        <el-table-column
                prop="jylsh"
                label="流水号"
        >
        </el-table-column>
        <el-table-column
                prop="kssj"
                label="开始时间"
                :formatter="formatter"
        >
        </el-table-column>
        <el-table-column
                label="照片"
                width="81">
            <template slot-scope="scope">
                <el-image
                        :preview-src-list="[scope.row.src ? scope.row.src : '/errorPhoto.jpg']"
                        style="width: 50px; height: 50px"
                        :src="scope.row.src ? scope.row.src : '/errorPhoto.jpg'"></el-image>
            </template>
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button v-on:click="handleClick(scope.row,scope.$index)" type="warning" size="small">抓拍</el-button>
            </template>
        </el-table-column>
    </el-table>

</div>

<script>
    var _POST = function(item) {
        let data = item.data
        let url = item.url
        let error = item.error
        let success = item.success
        $.ajax({
            url: url,
            type: 'POST',
            data: data,
            success: success,
            error: error,
            timeout: 3000
        })
    }
    var app = new Vue({
        el: '#app',

        data: {
            api: {
                catchApi: '/photo',
                list: '/cars'
            },
            message: 'Hello Vue!',
            car: {
                jylsh: '',
                hphm: '',
                queryModel: '01'
            },
            tableData: [],
            config: {
                delay: 300,
                line: "1"
            },
            loading: false,
            options: [
                {
                    value: '1',
                    label: '摄像头1'
                },
                {
                    value: '2',
                    label: '摄像头2'
                },
                {
                    value: '3',
                    label: '摄像头3'
                }
            ]

        },
        created: function () {
            this.onList()
        },
        methods: {
            test: function (item) {

            },
            onList: function () {
                this.loading = true
                const _this = this
                _POST({
                    data: _this.car,
                    url: _this.api.list,
                    success: function (data, status) {
                        _this.loading = false
                        _this.tableData = data.records

                    },
                    error: function (data) {
                        _this.loading = false
                        console.error(data)
                        Vue.prototype.$message({
                            type: 'error',
                            message: '获取列表失败:' + data.statusText
                        })
                    }
                })
            },
            onQuery: function () {
                this.onList()
            },
            handleClick: function (item, index) {
                this.loading = true
                var _this = this
                var tempParam = {}
                tempParam.jylsh = item.jylsh
                tempParam.jyjgbh = item.jyjgbh
                tempParam.jycs = item.jycs
                tempParam.jcxdh = this.config.line
                tempParam.hphm = item.hphm
                tempParam.hpzl = item.hpzl
                tempParam.clsbdh = item.clsbdh
                if (!this.config.delay || this.config.delay < 0) {
                    this.config.delay = 0
                }
                if (this.config.delay > 3000) {
                    this.config.delay = 3000;
                }
                Vue.prototype.$message({
                    type: 'success',
                    message: `开始抓拍:${tempParam.hphm}_${tempParam.jcxdh}`
                })
                setTimeout(function () {
                    $.ajax({
                        url: _this.api.catchApi,
                        type: 'POST',
                        data: tempParam,
                        timeout: 5000,
                        success: function(data) {
                            _this.loading = false
                            Vue.prototype.$message({
                                type: 'success',
                                message: '已抓拍'
                            })

                            let tableDatum = _this.tableData[index];
                            tableDatum.src = '/download/' + tableDatum.jylsh + "?" + new Date().getTime()
                            _this.tableData = JSON.parse(JSON.stringify(_this.tableData))
                            console.log(_this.tableData[index])
                        },
                        error: function (data) {
                            log.error(data)
                            Vue.prototype.$message({
                                type: 'error',
                                message: '抓拍失败'
                            })
                            _this.loading = false
                        }
                    })
                }, this.config.delay);

            },
            formatter: function (row) {
                if (row.kssj) {
                    return new Date(row.kssj).toLocaleString()
                }
                return ''
            }
        }
    })
</script>
</body>
</html>